<template>
  <div class="box">
    <div class="inside">
      <div class="tabs">
        <a
          href="javascript:"
          @click="cut(true)"
          class="fault"
          :style="isColor ? Color : ''"
          >故障设备监控</a
        >
        <a
          href="javascript:"
          @click="cut(false)"
          class="anomaly"
          :style="isColor ? '' : Color"
          >异常设备监控</a
        >
      </div>
      <div class="state" v-if="isTab">
        <ul>
          <li>故障时间</li>
          <li>设备地址</li>
          <li>异常代码</li>
        </ul>
        <div class="marquee-view">
          <div class="marquee">
            <ul class="content">
              <li><i class="icon-dot"></i>20190701</li>
              <li>北京市昌平区建材城西路金燕龙写字楼</li>
              <li>1000008</li>
            </ul>
            <ul class="content">
              <li><i class="icon-dot"></i>20190701</li>
              <li>北京市昌平区建材城西路金燕龙写字楼</li>
              <li>1000008</li>
            </ul>
            <ul class="content">
              <li><i class="icon-dot"></i>20190701</li>
              <li>北京市昌平区建材城西路金燕龙写字楼</li>
              <li>1000008</li>
            </ul>
            <ul class="content">
              <li><i class="icon-dot"></i>20190701</li>
              <li>北京市昌平区建材城西路金燕龙写字楼</li>
              <li>1000008</li>
            </ul>
            <ul class="content">
              <li><i class="icon-dot"></i>20190701</li>
              <li>北京市昌平区建材城西路金燕龙写字楼</li>
              <li>1000008</li>
            </ul>
            <ul class="content">
              <li><i class="icon-dot"></i>20190701</li>
              <li>北京市昌平区建材城西路金燕龙写字楼</li>
              <li>1000008</li>
            </ul>
            <ul class="content">
              <li><i class="icon-dot"></i>20190701</li>
              <li>北京市昌平区建材城西路金燕龙写字楼</li>
              <li>1000008</li>
            </ul>
            <ul class="content">
              <li><i class="icon-dot"></i>20190701</li>
              <li>北京市昌平区建材城西路金燕龙写字楼</li>
              <li>1000008</li>
            </ul>
            <ul class="content">
              <li><i class="icon-dot"></i>20190701</li>
              <li>北京市昌平区建材城西路金燕龙写字楼</li>
              <li>1000008</li>
            </ul>
            <ul class="content">
              <li><i class="icon-dot"></i>20190701</li>
              <li>北京市昌平区建材城西路金燕龙写字楼</li>
              <li>1000008</li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 第二栏 -->
      <div class="state" v-else>
        <ul>
          <li>异常时间</li>
          <li>设备地址</li>
          <li>异常代码</li>
        </ul>
        <div class="marquee-view">
          <div class="marquee">
            <ul class="content">
              <li><i class="icon-dot"></i>20190701</li>
              <li>/百度网盘/黑马7.6/003-讲义%20代码/0</li>
              <li>1000008</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'EchratIn',
  data () {
    return {
      isTab: true, // 状态栏状态
      Color: 'color:#1950c4',
      isColor: true // 状态栏颜色
    }
  },
  // 真实dom挂载后
  mounted () {
    this.cloNode()
  },
  // data值变化触发
  updated () {
    this.cloNode()
  },
  methods: {
    // 克隆渲染
    cloNode () {
      const con = document.querySelector('.marquee').getElementsByTagName('ul')
      const marquee = document.querySelector('.marquee')
      const l = con.length
      for (let i = 0; i < l; i++) {
        const el = con[i].cloneNode(true)
        marquee.appendChild(el)
      }
    },

    // 点击 -> 切换显示栏
    cut (flag) {
      if (flag !== true && this.isTab !== false) {
        this.isColor = !this.isColor
        this.isTab = !this.isTab
      }
      if (flag !== false && this.isTab !== true) {
        this.isColor = !this.isColor
        this.isTab = !this.isTab
      }
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  height: 400px;
  .inside {
    overflow: hidden;
    padding: 24px 0;
    margin-bottom: 24px;
  }
  .tabs {
    margin: 0 0 20px 0;
    a {
      padding-right: 30px;
      font-size: 18px;
      color: #fff;
      padding-left: 30px;
    }
    a:nth-child(2) {
      border-left: 2px solid #00f2f1;
    }
  }
  .state {
    ul {
      background-color: rgba(255, 255, 255, 0.1);
      height: 40px;
      display: flex;
      line-height: 40px;
      justify-content: space-between;
      color: #68d8fe;
      font-size: 16px;
      li:nth-child(1) {
        margin: 0 30px 0 30px;
      }
      li:nth-child(2) {
        width: 250px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      li:nth-child(3) {
        margin-right: 49px;
      }
    }
    .marquee-view {
      overflow: hidden;
      .marquee {
        .content {
           background-color: transparent;
          i {
            line-height: 40px;
            display: none;
          }
          &:hover {
            background-color: rgba(255, 255, 255, 0.1);
            i {
              display: inline-block;
              margin-right: 5px;
            }
            li:nth-child(1) {
              margin-left: 9px;
            }
          }
          li:nth-child(1) {
            margin-right: 20px;
          }
          li {
            color: #61a8ff;
          }
        }
      }
    }
  }
  .marquee-view .marquee {
    animation: move 15s linear infinite;
  }
  @keyframes move {
    0% {
    }
    100% {
      transform: translateY(-50%);
    }
  }
  // 鼠标经暂停动画
  .marquee-view .marquee:hover {
    animation-play-state: paused;
  }
}
</style>
